<template>
  <div class="center_div">
    <el-form ref="form" :model="applyDetail" label-width="100px" style="margin-top:50px;">
      <el-form-item label="申请人" prop="employeename">
        <el-input v-model="applyDetail.employeename" disabled style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input v-model="applyDetail.username" disabled style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="applyDetail.phone" disabled style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="applyDetail.email" disabled style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="role">

        <el-tag v-if="applyDetail.role === 0" type="info">员工</el-tag>
        <el-tag v-if="applyDetail.role === 1" type="success">组长</el-tag>
        <el-tag v-if="applyDetail.role === 2">部长</el-tag>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="applyButton" @click="onSubmit">{{ButtonContent}}</el-button>
        <el-button type="primary" v-if="applyButton" @click="cancelSubmit">取消升职</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "apply-car",
    data() {
      return {
        applyButton:false,
        ButtonContent: '立即申请',
        applyDetail: {
          employeename: this.$store.state.user.user.employeename,
          username: this.$store.state.user.user.username,
          phone: this.$store.state.user.user.phone,
          email: this.$store.state.user.user.email,
          role: this.$store.state.user.user.role,
        }
      }
    },
    async created() {
      await this.applyStatus()
    },
    methods: {
      onSubmit() {
        if (this.applyDetail.role === 2) {
          this.$message.error('已经是最高职位，不允许申请升职')
          return
        }
        // console.log(this.applyDetail)
        this.applyPromoted()
      },
      async applyPromoted(){
        let {code ,data ,msg} = await this.$post('/dealpromoted')
        if(code === 200) {
          this.applyButton = true
          console.log(data)
          this.$message({
            message: "申请升职成功， 请及时联系上一级进行审批",
            type: 'success'
          })
        }else {
          this.$message.error(msg)
        }
      },
      async applyStatus(){
        let {code ,data ,msg} = await this.$post('/personal/promoted')
        if(code === 200) {
          this.applyDetail = this.$store.state.user.user
          if (data.emp.status === 5) {
            this.applyButton = true
            this.ButtonContent = '申请升职中'
          }
        }else {
          this.$message.error(msg)
        }
      },
      async cancelSubmit(){
        let {code ,data ,msg} = await this.$post('/personal/cancel/promoted')
        if(code === 200) {
          console.log(data)
          this.$message({
            message: msg,
            type: 'success'
          })
        }else {
          this.$message.error(msg)
        }
      }
    }
  }
</script>

<style>
  .center_div{
    width: 60%;
    margin-left:auto;
    margin-bottom: 50px;
    margin-top: 50px;
  }
</style>